<script setup>
import { onMounted, ref } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
import NavBar from '@/components/NavBar.vue'
import { getFoodList } from '@/api/index'
import { fixCoverImageUrl } from '@/utils/fixImageUrls'

// 滚动距离，用于导航栏背景色渐变
const scrollTop = ref(0)
onPageScroll((event) => {
  scrollTop.value = event.scrollTop
})

const foodRecommendList = ref([])
async function onGetFoodList() {
  const { result } = await getFoodList()
  foodRecommendList.value = result.map((item) => {
    return {
      ...item,
      url: fixCoverImageUrl(item.cover),
    }
  })
}

function goFoodDetail(id) {
  uni.navigateTo({ url: `/pages/index/view/food-detail?id=${id}` })
}

onMounted(() => {
  onGetFoodList()
})
</script>

<template>
  <view class="container pb-safe min-h-safe">
    <NavBar title="美食推荐" :scroll-top="scrollTop" />
    <main class="px-1.5 pt-1.5">
      <view class="flex flex-wrap justify-between">
        <view
          v-for="item in foodRecommendList"
          :key="item.id"
          class="mb-1.5 bg-white rounded shadow flex flex-col w-352 overflow-hidden"
          @click="goFoodDetail(item.id)"
        >
          <image class="h-352 w-352" :src="item.url" mode="aspectFill" />
          <view class="text-[#666] flex justify-between">
            <p class="px-1.5 py-2 text-28">
              {{ item.title }}
            </p>
            <view class="px-1.5 center">
              <view class="i-ant-design:heart-outlined" />
              <view class="pl-0.5 text-20">
                {{ item.xihuan }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </main>
  </view>
</template>

<style scoped>
.container {
  background-image: linear-gradient(to bottom, #fbbec0 10%, white 40%);
}
</style>
